<%-- 
    Document   : loginCallback
    Created on : 2012-11-2, 17:50:18
    Author     : cgqhs
--%>

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@ taglib uri="/struts-tags" prefix="s"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">

<html>
        <head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>微瑞广告投放</title>
		<style type="text/css">
			/*****通用定义*****/
			body {background-color: #00869c;}
			.weire-center {margin-left: auto;margin-right: auto;}
                        .weire-button,.weire-button:visited,weire-button:link {color: #fbeed5;line-height: 46px;font-size: 40px;font-weight: bolder;text-decoration: none;}
                        .weire-button:hover {color: #ffffff;}
                        .weire-button:active {color: #7aba7b;}

                        #weire-count-down {margin-left: 50px;display: inline;}
                        #weire-count-down span {font-size: 44px;font-weight: bolder;color: #fbeed5;}
			.weire-clear {clear: both;}
                        .weire-space-bottom {margin-bottom: 30px;}
			/*****广告体样式定义*****/
			#weire-ads-body {width: 950px;height: 530px;position: relative;background-color: #00869c;}

			.weire-row {background-color: #00869c;position: relative;}
			.weire-row>.weire-row,.weire-row>.weire-colum,.weire-row>.weire-ad-box {float:left;height: 100%;}
			.weire-row>.weire-row + .weire-row,.weire-row>.weire-row + .weire-colum,.weire-row>.weire-row + .weire-ad-box,
			.weire-row>.weire-colum + .weire-row,.weire-row>.weire-colum + .weire-colum,.weire-row>.weire-colum + .weire-ad-box,
			.weire-row>.weire-ad-box + .weire-row,.weire-row>.weire-ad-box + .weire-colum,.weire-row>.weire-ad-box + .weire-ad-box {margin-left: 10px;}

			.weire-colum {background-color: #00869c;position: relative;}
			.weire-colum>.weire-row,.weire-colum>.weire-colum,.weire-colum>.weire-ad-box {width: 100%;}
			.weire-colum>.weire-row + .weire-row,.weire-colum>.weire-row + .weire-colum,.weire-colum>.weire-row + .weire-ad-box,
			.weire-colum>.weire-colum + .weire-row,.weire-colum>.weire-colum + .weire-colum,.weire-colum>.weire-colum + .weire-ad-box,
			.weire-colum>.weire-ad-box + .weire-row,.weire-colum>.weire-ad-box + .weire-colum,.weire-colum>.weire-ad-box + .weire-ad-box {margin-top: 10px;}

			.weire-ad-box {background-color: #efefef;position: relative;}
			/*****长度定义*****/
			.weire-row>.weire-span1 {width: 70px;}
			.weire-row>.weire-span2 {width: 150px;}
			.weire-row>.weire-span3 {width: 230px;}
			.weire-row>.weire-span4 {width: 310px;}
			.weire-row>.weire-span5 {width: 390px;}
			.weire-row>.weire-span6 {width: 470px;}
			.weire-row>.weire-span7 {width: 550px;}
			.weire-row>.weire-span8 {width: 630px;}
			.weire-row>.weire-span9 {width: 710px;}
			.weire-row>.weire-span10 {width: 790px;}
			.weire-row>.weire-span11 {width: 870px;}
			.weire-row>.weire-span12 {width: 950px;}

			.weire-colum>.weire-span1 {height: 35px;}
			.weire-colum>.weire-span2 {height: 80px;}
			.weire-colum>.weire-span3 {height: 125px;}
			.weire-colum>.weire-span4 {height: 170px;}
			.weire-colum>.weire-span5 {height: 215px;}
			.weire-colum>.weire-span6 {height: 260px;}
			.weire-colum>.weire-span7 {height: 305px;}
			.weire-colum>.weire-span8 {height: 350px;}
			.weire-colum>.weire-span9 {height: 395px;}
			.weire-colum>.weire-span10 {height: 440px;}
			.weire-colum>.weire-span11 {height: 485px;}
			.weire-colum>.weire-span12 {height: 530px;}
			/*****图片文字定义*****/
			.weire-ad-box > span {width: 100%;height: 40%;position: relative;top: 60%;display: none;background: rgba(0,0,0,0.5);filter: progid:DXImageTransform.Microsoft.gradient(startcolorstr=#7F000000,endcolorstr=#7F000000);}
			.weire-ad-box:hover > span {display: block;color: #fefefe;}
			/*****图片浮动定义*****/
			.weire-show-box {overflow: hidden;}
			.weire-show-box > .weire-ad-box {position: absolute;}
			.weire-show-box > .weire-ad-box + .weire-ad-box {margin: 0;left: 100%;}
			/*****图片背景*****/
			.weire-bgimg-1 {background-image: url(images/adsDemo/A1.jpg);background-repeat: no-repeat;}
			.weire-bgimg-2 {background-image: url(images/adsDemo/A2.jpg);background-repeat: no-repeat;}
			.weire-bgimg-3 {background-image: url(images/adsDemo/A3.jpg);background-repeat: no-repeat;}
			.weire-bgimg-4 {background-image: url(images/adsDemo/B.jpg);background-repeat: no-repeat;}
			.weire-bgimg-5 {background-image: url(images/adsDemo/C1.jpg);background-repeat: no-repeat;}
			.weire-bgimg-6 {background-image: url(images/adsDemo/C2.jpg);background-repeat: no-repeat;}
			.weire-bgimg-7 {background-image: url(images/adsDemo/D.jpg);background-repeat: no-repeat;}
			.weire-bgimg-8 {background-image: url(images/adsDemo/E1.jpg);background-repeat: no-repeat;}
			.weire-bgimg-9 {background-image: url(images/adsDemo/E2.jpg);background-repeat: no-repeat;}
			.weire-bgimg-10 {background-image: url(images/adsDemo/E3.jpg);background-repeat: no-repeat;}
			.weire-bgimg-11 {background-image: url(images/adsDemo/F.jpg);background-repeat: no-repeat;}
		</style>

		<script type="text/javascript" src="js/jquery.min.js"></script>
		<script type="text/javascript">
			function showBox(array, i){
				var _index = $(array[i]).css('z-index');
				$(array[i]).css({'z-index': '1000'});
				$(array[i]).animate({
					left: "0"
				},{
					duration: 1000,
					complete: function() {
						for(var j=1; j<array.length; j++){
							var k = (i+j)%array.length;
							$(array[k]).css({
								left: "100%"
							});
						}
						$(array[i]).css({'z-index': _index});
					}
				});
			}

			function _showBox(array, i){
				return function() {
					showBox(array, i);
				}
			}

			$(function() {
				$('.weire-show-box').each(function() {
					var array = $(this).children('.weire-ad-box');
					var i = 1;
					setInterval(function() {
						setTimeout(_showBox(array,i),Math.random()*6000);
						i = (i+1)%array.length;
					},4000);

				})

                                var j = $('#weire-count-down').text();
                                var _count_down = $('#weire-count-down span');
                                var timeID = setInterval(function() {
                                        var _j = j--;
                                        _count_down.text(_j);
                                        if(j < 0){
                                            window.location.href="interests.action";
                                            window.clearInterval(timeID);
                                            $('#weire-skip').text('正在跳转请稍后...');
                                        }
                                },999);
			});
		</script>
	</head>

	<body>
                <div class="weire-clear weire-space-bottom"></div>
		<!--广告体-->
		<div id="weire-ads-body" class="weire-center weire-row">
			<!--广告块-->
			<div class="weire-colum weire-span4">
				<div class="weire-row weire-span12 weire-show-box">
                                <s:if test="position0.isEmpty()">
                                        <div class="weire-ad-box weire-span12 weire-bgimg-1"></div>
                                </s:if>
                                <s:elseif test="position0.size() = 1">
                                        <s:iterator value="%{position0}" id="pos">
                                        <div class="weire-ad-box weire-span12" style="background-image: url(<s:property value="pos"/>);"></div>
                                        </s:iterator>
                                </s:elseif>
                                <s:else>
                                        <div class="weire-row weire-span12 weire-show-box">
                                                <s:iterator value="%{position0}" id="pos">
                                                <div class="weire-ad-box weire-span4 weire-bgimg-1" style="background-image: url(<s:property value="pos"/>);"><span>呵呵</span></div>
                                                </s:iterator>
                                        </div>
                                </s:else>
                                </div>
			</div>
			<!--列-->
			<div class="weire-colum weire-span3">
                                <s:if test="position1.isEmpty()">
                                        <div class="weire-ad-box weire-span5 weire-bgimg-5"></div>
                                </s:if>
                                <s:elseif test="position1.size() = 1">
                                        <s:iterator value="%{position1}" id="pos">
                                        <div class="weire-ad-box weire-span5" style="background-image: url(<s:property value="pos"/>);"></div>
                                        </s:iterator>
                                </s:elseif>
                                <s:else>
                                        <div class="weire-row weire-span5 weire-show-box">
                                                <s:iterator value="%{position1}" id="pos">
                                                <div class="weire-ad-box weire-span3 weire-bgimg-5" style="background-image: url(<s:property value="pos"/>);"><span>呵呵</span></div>
                                                </s:iterator>
                                        </div>
                                </s:else>

                                <s:if test="position2.isEmpty()">
                                        <div class="weire-ad-box weire-span7 weire-bgimg-4"></div>
                                </s:if>
                                <s:elseif test="position2.size() = 1">
                                        <s:iterator value="%{position2}" id="pos">
                                        <div class="weire-ad-box weire-span7" style="background-image: url(<s:property value="pos"/>);"></div>
                                        </s:iterator>
                                </s:elseif>
                                <s:else>
                                        <div class="weire-row weire-span7 weire-show-box">
                                                <s:iterator value="%{position2}" id="pos">
                                                <div class="weire-ad-box weire-span3 weire-bgimg-4" style="background-image: url(<s:property value="pos"/>);"><span>呵呵</span></div>
                                                </s:iterator>
                                        </div>
                                </s:else>
			</div>
			<div class="weire-colum weire-span5">
				<div class="weire-row weire-span9">
                                        <s:if test="position3.isEmpty()">
                                                <div class="weire-ad-box weire-span3 weire-bgimg-7"></div>
                                        </s:if>
                                        <s:elseif test="position3.size() = 1">
                                                <s:iterator value="%{position3}" id="pos">
                                                <div class="weire-ad-box weire-span3" style="background-image: url(<s:property value="pos"/>);"></div>
                                                </s:iterator>
                                        </s:elseif>
                                        <s:else>
                                                <div class="weire-row weire-span3 weire-show-box">
                                                        <s:iterator value="%{position3}" id="pos">
                                                        <div class="weire-ad-box weire-span3 weire-bgimg-7" style="background-image: url(<s:property value="pos"/>);"><span>呵呵</span></div>
                                                        </s:iterator>
                                                </div>
                                        </s:else>

                                        <s:if test="position4.isEmpty()">
                                                <div class="weire-ad-box weire-span2 weire-bgimg-8"></div>
                                        </s:if>
                                        <s:elseif test="position4.size() = 1">
                                                <s:iterator value="%{position4}" id="pos">
                                                <div class="weire-ad-box weire-span2" style="background-image: url(<s:property value="pos"/>);"></div>
                                                </s:iterator>
                                        </s:elseif>
                                        <s:else>
                                                <div class="weire-row weire-span2 weire-show-box">
                                                        <s:iterator value="%{position4}" id="pos">
                                                        <div class="weire-ad-box weire-span2 weire-bgimg-8" style="background-image: url(<s:property value="pos"/>);"><span>呵呵</span></div>
                                                        </s:iterator>
                                                </div>
                                        </s:else>
				</div>
                                <s:if test="position5.isEmpty()">
                                        <div class="weire-ad-box weire-span3 weire-bgimg-11"></div>
                                </s:if>
                                <s:elseif test="position5.size() = 1">
                                        <s:iterator value="%{position5}" id="pos">
                                        <div class="weire-ad-box weire-span3" style="background-image: url(<s:property value="pos"/>);"></div>
                                        </s:iterator>
                                </s:elseif>
                                <s:else>
                                        <div class="weire-row weire-span3 weire-show-box">
                                                <s:iterator value="%{position5}" id="pos">
                                                <div class="weire-ad-box weire-span5 weire-bgimg-11" style="background-image: url(<s:property value="pos"/>);"><span>呵呵</span></div>
                                                </s:iterator>
                                        </div>
                                </s:else>
			</div>
			<div class="weire-clear weire-space-bottom"></div>
                        <a id="weire-skip" class="weire-button" href="interests.action">跳过&nbsp;-></a>
                        <div id="weire-count-down"><span>15</span></div>
		</div>

	</body>
</html>
